<template>
	<view class="content">
		<view class="text1">
			<view class="text-left">家校窗
			</view>
			<view class="text-right">家校一体化教育辅助平台
			</view>
		</view>
		<view class="text2">
			欢迎登录进行使用！
		</view>
		<view class="username">
			<input type="text" placeholder="请输入您的账号" v-model="username" class="input" @confirm="" />
		</view>
		<view class="password">
			<input type="password" placeholder="请输入您的密码" v-model="password" class="input" />
		</view>
		<view class="log-but" @click="login()">
			<button class="button">登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				jwtToken: ''
			}
		},
		methods: {
			goPage(id) {
				console.log(id);
				if (id == 1) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			login() {
				const loginData = {
					username: this.username,
					password: this.password
				};
				wx.setStorageSync('user_name', this.username);
				uni.request({
					url: `http://localhost:8080/login/patriarch`,
					method: 'POST',
					data: loginData,
					success: (res) => {
						if (res.data.code === 1 && res.data.msg === 'success') {
							wx.setStorageSync('jwt_token', res.data.data);
							this.goPage(1);
						} else {
							uni.showToast({
								title: '登录失败'
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.text1 {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 250rpx;
		margin-top: 50rpx;
		padding-top: 30rpx;
	}

	.text-left {
		display: flex;
		justify-content: center;
		font-size: 85rpx;
		font-weight: bold;
		font-family: AliMamaShuHei;
		width: 40%;
		height: 150rpx;
		padding-top: 100rpx;
	}

	.text-right {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		font-family: AliMamaShuHei;
		width: 45%;
		height: 100rpx;
		margin-top: 120rpx;
		color: #343965;
		margin-right: 70rpx;
	}

	.text2 {
		width: 100%;
		height: 100rpx;
		font-size: 35rpx;
		font-family: AliMamaShuHei;
		padding-left: 100rpx;
	}

	.input {
		width: 650rpx;
		height: 100rpx;
		margin: 25rpx;
		padding-left: 20rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		font-family: AliMamaShuhei;
		background-color: #ECF2FF;
	}

	.log-but {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 650rpx;
		height: 100rpx;
		margin-top: 25rpx;
		background-color: #585CE5;
		border-radius: 50rpx;
	}

	.button {
		width: 650rpx;
		height: 100rpx;
		border-radius: 50rpx;
		font-size: 35rpx;
		font-family: AliMamaShuhei;
		background-color: #585CE5;
		color: #ffffff;
		font-weight: normal;
	}
</style>